<template>
  <div class="login-container">
    <div class="logo">
      <img src="../assets/logo.png" alt="">
    </div>

    <el-form :model="user" :rules="userRules" ref="userForm" label-width="0px" class="loginform_style">
      <el-form-item prop="username">
        <el-input v-model="user.username" prefix-icon="el-icon-user-solid" placeholder="输入您的用户名"></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input v-model="user.pwd" prefix-icon="el-icon-s-goods" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="yzm">
        <el-input v-model="user.yzm" prefix-icon="el-icon-s-goods" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="info" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
          return{
            user:{
              yzm:''
            },
            userRules:{
              username:[
                {required: true, message: '请输入用户名', trigger: 'blur'}
              ],
              pwd:[
                {required: true, message: '请输入密码', trigger: 'blur'},
                {min: 3, message: '最少3字符', trigger: 'blur'}
              ],
             yzm:[
                {required: true, message: '请输入验证码', trigger: 'blur'},
                {min: 3, message: '验证码不为空', trigger: 'blur'}
              ]
            }
          }
        },
      methods:{
        login:function(){
          this.$refs['userForm'].validate((valid) => {
            if (!valid) {
              return
            }
            this.$http.post("/user/login",this.user).then(
              (res)=>{
                if(res.data.success){
                  this.$message({
                    type:'success',
                    message:res.data.message
                  });
                  window.sessionStorage.setItem("user",JSON.stringify(res.data.result.user));
                  window.sessionStorage.setItem("token",res.data.result.token);
                  this.$router.push('/home')
                }else{
                  this.$message.error(res.data.message);
                }
              }
            );
          });
        },
        resetForm() {
          this.$refs['userForm'].resetFields();
        }
      }
    }
</script>

<style scoped lang="less">
  .login-container {
    width: 450px;
    height: 314px;
    background-color: #fff;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;

  .logo {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 0 10px #eee;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    background-color: #fff;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
  }
  }

  .loginform_style {
    padding: 0 20px;
    margin-top: 110px;
  }

  .btns {
    display: flex;
    justify-content: center;
  }
  }
</style>
